<template>
	<view class="addmain">
		<view class="bx-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>维保设备信息
				</view>
				<view class="right right2">
					<view class="iconfont icon-app-saoma sm-add" @click="saomaAdd">扫码添加</view>
					<view class="iconfont icon-app-add sm-sd" @click="togoSelectSb">手动添加</view>
				</view>
			</view>
			<view class="bx-info" v-if="detailList&& detailList.id">
				<view class="left-icon">
					<image v-if="detailList.devicePicture" :src="detailList.devicePicture"></image>
					<image style="width:80rpx;height: 80rpx;" v-if="!detailList.devicePicture"
						src="../../../static/images/index/weibaorenwu.png" mode=""></image>
				</view>
				<view class="right-txt">
					<view class="txt1">{{detailList.deviceNum==''?'':detailList.deviceNum+'-'}}{{detailList.deviceName}}
					</view>
					<view class="txt2">{{detailList.brand!=''?(detailList.brand+'-'):''}}{{detailList.modelName}}</view>
				</view>
			</view>
		</view>
		<!-- 维保时间 -->
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togoOpenstartTime">
				<view class="left">
					<view style="color: red;">*</view>维保时间
				</view>
				<view class="right1">
					<view :class="[dataParams.planBeginDate!=''?'select-bg':'']">
						{{dataParams.planBeginDate!=''?dataParams.planBeginDate:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<u-datetime-picker :minDate="Number(new Date())" :show="showTime" :value="timeValue" mode="date"
			@cancel="cancelTime" @confirm="confirmTime">
		</u-datetime-picker>
		<!-- 维保人 -->
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togoPeopleSelect">
				<view class="left">
					<view style="color: red;">*</view>维保人
				</view>
				<view class="right1">
					<view :class="[(dataParams.maintainUserName!='')?'select-bg':'']">
						{{dataParams.maintainUserName!=''?dataParams.maintainUserName:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<!-- 维保类型 -->
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="bx-list" style="margin-top: 2rpx;">
			<view class="bx-list-title" @click="togohitchSelect">
				<view class="left">
					<view style="color: red;">*</view>维保类型
				</view>
				<view class="right1">
					<view :class="[(dataParams.maintainTypeName!='')?'select-bg':'']">
						{{dataParams.maintainTypeName!=''?dataParams.maintainTypeName:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<!-- 维保项设置 -->
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="bx-list" style="margin: 6rpx 0;">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>维保项配置
				</view>
				<view class="right ">
					<view class="sm-sd" @click="togoAddWb">添加维保项</view>
				</view>
			</view>
		</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view style="margin: 6rpx 0;" class="wbType-box" v-for="(item,index) in wbTypeList2" :key="item.id">

			<view class="title">
				{{index+1}}.{{item.itemName}}
			</view>
			<view class="info">
				{{item.content}}
			</view>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		</view>
		<!-- 按钮 -->
		<view class="bottom-subside"></view>
		<view class="bx-bottom">
			<view class="btn-left" @click="$dianji(comfirpage1,'onoff')">创建任务</view>
			<view class="btn-right" @click="$dianji(comfirpage2,'onoff2')">创建任务并维保</view>
		</view>
		<!-- 出库类型 -->
		<u-popup :show="typeShow" mode="bottom" :round="10">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in wbTypeList" :key="index">
					{{item.configValue}}
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import uploadVideo from '@/components/uploadVideo/index.vue';
	const timeFormat = uni.$u.timeFormat;
	export default {
		components: {
			uploadVideo
		},
		data() {
			return {
				onoff: true,
				onoff2: true,
				wbTypeList2: [],
				wbTypeList: [], //维保类型列表
				wbpeopleList: [], //维保人员列表
				showTime: false, //是否显示时间选择器
				typeShow: false,
				timeValue: Number(new Date()), //日期的双向绑定
				detailList: {}, //设备列表
				dataParams: {
					planType: 1,
					deviceType: '',
					maintainType: '',
					maintainTypeName: '',
					maintainDevices: '', //设备id
					planBeginDate: timeFormat(new Date(), 'yyyy-mm-dd'), //维保时间
					maintainUser: '', //维保人id
					maintainUserName: '', //维保人
					maintainItems: '',
				},

			}
		},
		onLoad() {
			this.getwbTypeLList()
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo')
			if (!this.wbpeopleList.find(item => item.id === userInfo.userId)) {
				this.wbpeopleList.unshift({
					id: userInfo.userId,
					realName: userInfo.realName
				})
			}

			//获取设备id并且赋值
			if (this.detailList && this.detailList.id) {
				this.dataParams.maintainDevices = this.detailList.id;
				this.dataParams.deviceType = this.detailList.deviceType
			}
			if (this.wbpeopleList && this.wbpeopleList.length > 0) {
				console.log(this.wbpeopleList, 'this.wbpeopleList')
				this.dataParams.maintainUserName = this.wbpeopleList.map((item) => {
					return item.realName
				}).join(',');
				this.dataParams.maintainUser = this.wbpeopleList.map((item) => {
					return item.id
				}).join(',');
			}
			if (this.wbTypeList2 && this.wbTypeList2.length > 0) {
				this.dataParams.maintainItems = this.wbTypeList2.map((item) => {
					return item.id
				}).join(',');
			}
		},
		methods: {
			//选择设备
			togoSelectSb() {
				uni.navigateTo({
					url: `/pages/subPackagesC/list/sbselect`,
					success: (res) => {
						uni.$emit('update', {
							msg: this.detailList.name
						})
					}
				});
			},
			//扫码获取设备
			saomaAdd() {
				const that = this
				// uni.$u.toast('该功能暂未开放，敬请期待~')
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
					autoDecodeCharset: false,
					autoZoom: false,
					barCodeInput: false,
					success: function(res) {
						console.log('条码内容：' + res.result);
						let codeInfo = res.result.split('?')[1]
						//这里获取扫码信息并且对扫码信息进行解析
						let equId = codeInfo.split('&')[0];
						let deviceNum = codeInfo.split('&')[1];
						that.getdeviceList(equId.split('=')[1])
					},
					fail: function(error) {
						console.log('扫码失败了')
					}
				});
			},
			//日期相关
			togoOpenstartTime() {
				this.showTime = true
			},
			confirmTime(e) {
				this.showTime = false;
				const timeFormat = uni.$u.timeFormat;
				let timeValue = timeFormat(e.value, 'yyyy-mm-dd');
				this.dataParams.planBeginDate = timeValue;
			},
			cancelTime() {
				this.showTime = false;
			},
			//人员选择
			togoPeopleSelect() {
				this.wbpeopleList.shift()
				uni.navigateTo({
					url: '/pages/subPackagesC/list/multiplePeo?peopleList=' + JSON.stringify(this.wbpeopleList) +
						'&userid=' + uni.getStorageSync('userInfo').userId
				})
			},
			//维保类型选择
			togohitchSelect() {
				this.typeShow = true
			},
			updateItem(item) {
				this.dataParams.maintainType = item.id;
				this.dataParams.maintainTypeName = item.configValue;
				this.typeShow = false
			},
			togoAddWb() {
				if (!this.detailList.deviceType) {
					uni.$u.toast('请先选择设备')
					return
				} else {
					uni.navigateTo({
						url: '/pages/subPackagesC/list/wblist?wblist=' + JSON.stringify(this.wbTypeList2) +
							'&deviceType=' + this.detailList.deviceType
					})
				}
			},

			//获取设备列表
			getdeviceList(id) {
				uni.$u.http.get(`/device/mobile/deviceInfo/deviceDetail/${id}`).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						if (res.data.removeFlag == 1) {
							uni.$u.toast('该设备已被删除')
							return
						}
						if (res.data.stopFlag == 1) {
							uni.$u.toast('该设备已停用')
							return
						}
						this.dataParams.deviceType
						this.detailList = res.data
						this.wbTypeList2 = []
					}
				}).catch(err => {})
			},

			getwbTypeLList() {
				uni.$u.http.post(`/device/pc/sysDataDictionary/dictionaryList`, {
					configType: 'maintain_type'
				}).then(res => {
					if (res.code == 0) {
						this.wbTypeList = res.data
					}
				}).catch(err => {})
			},
			confirm(type) {
				var that = this;
				if (!that.dataParams.maintainDevices) {
					uni.$u.toast('请选择要维保的设备')
					return
				}
				if (!that.dataParams.planBeginDate) {
					uni.$u.toast('请选择维保时间')
					return
				}
				if (!that.dataParams.maintainUser || !that.dataParams.maintainUserName) {
					uni.$u.toast('请选择维保人员')
					return
				}
				if (!that.dataParams.maintainTypeName) {
					uni.$u.toast('请选择维保类型')
					return
				}
				if (this.wbTypeList2.length < 1) {
					uni.$u.toast('请添加维保项')
					return
				}

				uni.$u.http.post(`/device/mobile/deviceMaintainPlan/saveMaintainPlan`, that.dataParams).then(res => {
					if (res.code == 0) {
						// uni.$u.toast('提交成功！')
						uni.showToast({
							title: '创建成功！',
							icon: 'success',
						});
						if (this.dataParams.planBeginDate != timeFormat(new Date(), 'yyyy-mm-dd') && type == 2) {
							uni.$u.toast('未到维保时间无法维保')
							return
						} else {
							setTimeout(() => {
								//#ifdef MP-ALIPAY
								uni.reLaunch({
									url: '/pages/subPackagesA/repairList/index'
								})
								uni.hideHomeButton()
								// #endif

								//#ifdef MP-WEIXIN
								if (type == 1) {
									uni.navigateTo({
										url: '/pages/subPackagesB/weibaoTask/index'
									})
								} else {
									uni.navigateTo({
										url: '/pages/subPackagesB/weibaoTask/weibaoinfo?id=' + res
											.data.id + '&taskOrderNum=' + res.data.taskOrderNum
									})
								}

								// #endif

							}, 500)
						}
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
				setTimeout(() => {
					this.onoff = true
					this.onoff2 = true
				}, 2000)
			},
			comfirpage1() {
				this.confirm(1)
			},
			comfirpage2() {
				this.confirm(2)
			},
		}

	}
</script>

<style lang="scss">
	.addmain {
		padding-bottom: 240rpx;
	}

	.bx-bottom {
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 33rpx 0 80rpx 0;
		position: fixed;
		z-index: 9;
		bottom: 0;

		.btn-left {
			width: 45%;
			height: 90rpx;
			border-radius: 12rpx;
			background: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #0F53AC;
			border: 1px solid #0F53AC;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}

		.btn-right {
			width: 45%;
			height: 90rpx;
			border-radius: 12rpx;
			background: rgba(15, 83, 172, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
			border: 1px solid #0F53AC;
		}
	}

	.wbType-box {
		padding: 2rpx 20rpx;
		background-color: #fff;

		.title {
			padding: 20rpx 0;
			border-bottom: 1px solid #f2f2f2;
			color: #333;
		}

		.info {
			padding: 20rpx 0;
			color: #666;
		}
	}

	page {
		background: #fff
	}

	.bx-list {
		background: #fff;
		border-bottom: none;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
			text-overflow: ellipsis;
			white-space: nowrap;

			.left {
				display: flex;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: #4D4D4D;
			}

			.right {
				display: flex;
				justify-content: space-around;

				.icon-app-saoma::before {
					margin-right: 8rpx;
				}

				.icon-app-add::before {
					margin-right: 8rpx;
				}

				.sm-add {
					display: flex;
					align-items: center;
					padding: 15rpx 20rpx;
					border-radius: 8rpx;
					color: #02AD82;
					background: rgba(2, 173, 130, 0.2);
					font-size: 28rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 8rpx;
					color: #0F53AC;
					background: rgba(15, 83, 172, 0.2);
					font-size: 28rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #A6A6A6;
			}

			.right2 {
				width: 55%;
			}

			.select-bg {
				color: #000000;
			}

			.margin1 {
				margin-top: 2rpx;
				padding: 40rpx 0 10rpx 0;
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 12rpx;
				}
			}

			.right-txt {
				padding-left: 16rpx;

				.txt1 {
					color: rgba(77, 77, 77, 1);
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: rgba(140, 140, 140, 1);
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}
</style>
